<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="理赔手册" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box">
			<block v-for="(item, index) in 4" :key="index">
				<view class="padding-top solid-bottom">
					<view class="pt20 pr24  pl6">
						<view class="flex align-center">
							<text class="block w14 h49 bg-red"></text>
							<view class=" ml30 flex flex-direction ww100">
								<text class="f50 text-black text-bold">重疾理赔</text>
							</view>
						</view>
					</view>
					<view class="padding ">
						<text class="f42">
							发生事故后，为维护您权益，请尽快拨打保险公司客服电话4006117777报案，按照保险公司客服指引申请理赔。
						</text>
						<view v-for="(item, indexx) in 10" :key="indexx" @click="showprop(indexx)">
							<block v-if="indexx < 2">
								<view class="flex justify-between mt33">
									<text class="f42">{{ indexx + 1 }}.被保人身份证件</text>
									<i class="cuIcon-right text-gray"></i>
								</view>
							</block>
							<block v-else-if="c == index">
								<view class="flex justify-between mt33">
									<text class="f42">{{ indexx + 1 }}.被保人身份证件</text>
									<i class="cuIcon-right text-gray"></i>
								</view>
							</block>
						</view>
						<view class="flex justify-center mt80 align-center" @click="clickShow(index)" v-if="c != index">
							<text>展开更多</text>
							<i class="cuIcon-unfold text-gray more ml20"></i>
						</view>
						<view class="flex justify-center mt80 align-center" @click="clickhide(index)" v-else>
							<text>收起</text>

							<i class="cuIcon-fold text-gray more ml20"></i>
						</view>
					</view>
				</view>
			</block>
		</view>

		<u-popup v-model="showPopup" mode="bottom" border-radius="14" length="80%" :closeable="true">
			<view class="box padding flex flex-direction align-center ">
				<text class="text-bold text-black f53 ">重疾理赔</text>
				<swiper
					class="padding"
					:current="current"
					:indicator-dots="true"
					:interval="3000"
					:duration="1000"
					style="height: 100%;width: 100vw;"
				>
					<swiper-item v-for="(item, index) in 10" :key="index">
						<view class="swiper-item flex flex-direction mymove">
							<text class="f42 text-black text-bold">{{ index + 1 }}.被保人身份证件</text>
							<text class="f42 mt20 text-black">材料说明：</text>
							<text class="f42 mt20 text-gray">
								未成年人保单若还未入户请提交出生医学证明及其副页。若
								已入户则提交被保险人户口本页。成年人保单需提供身份证 正反面照片。
							</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</u-popup>
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			showPopup: false,
			field: {
				backgroundColor: '#000'
			},
			c: -1,
			cc: '',
			current: 0
		};
	},
	onShow() {},
	onLoad(e) {},
	methods: {
		async clickShow(e) {
			// console.log('e :>> ', e);
			this.c = e;
		},
		async clickhide(e) {
			this.c != e;
			console.log('eee :>> ', e);
			// this.cc = e + 1;
		},
		async showprop(indexx) {
			this.current = indexx;

			this.showPopup = !this.showPopup;
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
}
/deep/.uni-scroll-view-content {
	background-color: #fefdfd;
}
.box {
	width: 100vw;
	height: 80vh;
}
.content_box {
	.more {
		color: #797979;
	}
}
.mymove {
	animation: mymove 1.5s;
}
@keyframes mymove {
	0% {
		transform: translateX(-10px);
	}
	25% {
		transform: translateX(10px);
	}
	50% {
		transform: translateX(-5px);
	}
	75% {
		transform: translateX(5px);
	}
	100% {
		// transform: translateX(30px);
		// transform: rotate(2deg);
	}
}
</style>
